Menambahkan Tombol Tindakan Mengambang

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.
Tombol Tindakan Mengambang →

Tombol tindakan mengambang (FAB) adalah tombol lingkaran yang memicu tindakan utama di UI aplikasi Anda. Halaman ini menunjukkan cara menambahkan FAB ke tata letak, menyesuaikan sebagian tampilannya, dan merespons ketukan tombol.

Untuk mempelajari lebih lanjut cara mendesain tombol tindakan mengambang ke dalam aplikasi Anda berdasarkan Panduan Desain Material, lihat juga Tombol: Tombol Tindakan Mengambang.

Gambar 1. Tombol tindakan mengambang

Menambahkan tombol tindakan mengambang ke tata letak Anda

Kode berikut menunjukkan tampilan FloatingActionButton dalam file tata letak Anda: 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Secara default, FAB diberi warna dengan atribut colorAccent, yang dapat Anda sesuaikan dengan palet warna tema.

Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau metode yang sesuai, seperti berikut:

  • Ukuran FAB, menggunakan atribut app:fabSize atau metode setSize().
  • Warna ripple FAB, menggunakan atribut app:rippleColor atau metode setRippleColor().
  • Ikon FAB, menggunakan atribut android:src atau metode setImageDrawable().

Merespons ketukan tombol

Selanjutnya, Anda dapat menerapkan View.OnClickListener untuk menangani ketukan FAB. Misalnya, kode berikut menampilkan Snackbar saat pengguna mengetuk FAB:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Untuk informasi selengkapnya tentang kapabilitas FAB, lihat referensi API untuk FloatingActionButton.